<template>
  <section>
    <el-drawer :title="title"
               :visible.sync="drawerVisible"
               :wrapperClosable="false"
               :close-on-press-escape="false"
               :withHeader='withHeader'
               :show-close="showClose"
               destroy-on-close
               :size="size"
               :direction='direction'
               :before-close='beforeClose'>
      <div class="drawer-body">
        <slot />
      </div>
      <div class="drawer-footer">
        <slot name="footer" />
      </div>
    </el-drawer>
  </section>
</template>
<script>
export default {
  name: 'ym-drawer',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    withHeader: {
      Boolean,
      default: true
    },
    size: {
      default: "60%"
    },
    direction: {
      type: String,
      default: 'rtl'
    }
  },
  data () {
    return {
      drawerVisible: false
    }
  },
  watch: {
    visible (v) {
      this.drawerVisible = v
    },
    drawerVisible (v) {
      this.$emit('update:visible', v)
    },
  },
  methods: {
    beforeClose (done) {
      this.drawerVisible = false
      done()
    }
  }
}
</script>
<style lang="scss" scoped>
.drawer-body {
  padding: 0 10px;
  padding-bottom: 70px;
}
.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  box-shadow: 0px -5px 5px #f5f5f5;
  z-index: 999;
  background: #fff;
}
</style>
